<template>
  <el-dialog
    width="800"
    title="详情"
    v-model="visible"
    draggable
    class="dialog"
    @close="closeDialog"
  >
    <h3>账号：{{ phone }}</h3>
    <el-table v-loading="loading" :data="tableList">
      <el-table-column label="累计打卡" align="center" prop="rules">
        <template #default="{ row }">
          <span>{{ row.rules }}单 </span>
        </template>
      </el-table-column>
      <el-table-column label="奖品名称" align="center" prop="rewardName">
        <template #default="{ row }">
          <el-button type="primary" link @click="handleSkipCouponPage(row)">
            {{ row?.rewardName }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="时间" align="center" prop="time" />
    </el-table>

    <div style="margin-right: 50px; position: relative">
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </el-dialog>
</template>
<script setup>
import { parseTime } from '@/utils/tools'
import { getParticipationAwardApi } from '@/api/marketing/punchCard'

const tableList = ref([])
const loading = ref(false)
const total = ref(0)
const visible = ref(false)
const phone = ref(null)
const queryParams = ref({
  clientId: null,
  activitySignInsId: null,
  pageNum: 1,
  pageSize: 10,
  cityName: null
})
const router = useRouter()
function handleSkip(path, query) {
  router.push({ path, query })
}
/**跳转到优惠券页面 */
function handleSkipCouponPage(row) {
  console.log('跳转到优惠券页面', row)
  switch (row.rewardType) {
    case 1:
      handleSkip('/market/activity', {
        id: row.rewardId,
        couponName: row?.rewardName,
        cityName: row.cityName
      })
      break
    case 2:
      handleSkip('/market/giftPack', {
        id: row.rewardId,
        packName: row?.rewardName,
        cityName: row.cityName
      })
      break
    case 3:
      handleSkip('/market/physicalGoods', {
        id: row.rewardId,
        couponName: row?.rewardName,
        cityName: row.cityName
      })
      break
  }
}
function getList() {
  console.log(queryParams.value.cityName)
  loading.value = true
  getParticipationAwardApi(queryParams.value)
    .then((res) => {
      loading.value = false
      tableList.value = res?.data?.rows ?? []
      total.value = res?.data?.total ?? 0
    })
    .catch(() => {
      loading.value = false
    })
}

function init(row, cityName) {
  phone.value = row?.phone
  queryParams.value.activitySignInsId = row?.activitySignInsId
  queryParams.value.clientId = row?.clientId
  queryParams.value.cityName = cityName
  visible.value = true
  getList()
}
function closeDialog() {}

defineExpose({
  init
})
</script>
<style lang="scss" scoped></style>
